<template>
  <div class="hot-articles">
    <h2>近期最热文章</h2>
    <ul class="article-list">
      <li v-for="(article, index) in articles" :key="index" class="article-item">
        <img :src="article.image" :alt="article.title">
        <div class="article-info">
          <div class="article-title">{{ article.title }}</div>
          <div class="article-meta">{{ article.readCount }}阅读 {{ article.time }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'PublisherHot',
  data() {
    return {
      articles: [
        {
          title: '缅甸内比都：灾后生活',
          image: 'https://picsum.photos/100/75?random=0',
          readCount: 53,
          time: '32分钟前'
        },
        {
          title: '班卡、杨扬将分别竞选连任WADA主席和副主席竞选连任WADA主席和竞选连任WADA主席和竞选连任WADA主席和分别竞选连任WADA主席和分别竞选连任WADA主席和',
          image: 'https://picsum.photos/100/75?random=1',
          readCount: 39,
          time: '55分钟前'
        },
        {
          title: '国际世界运动会协会主席：成都已经准备好了',
          image: 'https://picsum.photos/100/75?random=2',
          readCount: 37,
          time: '1小时前'
        },
        {
          title: '中国红十字国际救援队在曼德勒开展救援',
          image: 'https://picsum.photos/100/75?random=3',
          readCount: 31,
          time: '1小时前'
        }
      ]
    }
  }
}
</script>

<style scoped>
.hot-articles {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  max-width: 340px;
  margin: 0 auto;
  /* padding: 20px; */
  color: #333;
}

h2 {
  font-size: 18px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.article-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.article-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.article-item:last-child {
  border-bottom: none;
}

.article-item img {
  width: 100px;
  height: 75px;
  margin-right: 12px;
  border-radius: 4px;
  object-fit: cover;
}

.article-info {
  flex: 1;
}

.article-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-meta {
  font-size: 12px;
  color: #999;
}
</style>